<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml"
       xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <script th:src="@{static/js/vue.js}"></script>
    <script th:src="@{static/js/elementUI.js}"></script>
    <script th:src="@{static/js/axios.js}"></script>
    <link th:href="@{static/css/elementUI.css}" rel="stylesheet" />
    <style>
        /**/
        .text {
            font-size: 15px;
        }

        .item {
            margin-bottom: 5px;
        }
        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }
        .clearfix:after {
            clear: both
        }

        .box-card {
            width: 100%;
        }
        #main{
            width: 80%;
            margin: auto;
            margin-top: 10px;
        }
        #dataTable{
            margin-top: 10px;
        }
        #form{
            line-height: 60px;
        }
        #top{
            /*height: 100px;*/
            /*overflow: hidden;*/
        }
        div{
            /*border: 1px red solid;*/
        }
    </style>
</head>

<body>
<div id="top">
    <el-card class="box-card" style="background-color: #EBEEF5">
        <span style="margin-left: 9%;margin-top: 5px;background-color: #3a8ee6;font-size: 15px">&nbsp;&nbsp;</span>
        <span style="font-size: 15px;margin-left: 10px">产品日志</span>
        <el-button type="primary" size="small" icon="el-icon-refresh" style="float: right;margin-right: 170px" >刷新</el-button>    </el-card>
</div>
<div id="main">
    <div id="dataTable">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span style="font-size: 15px">数据列表</span>
            </div>
            <template>
                <!--  给表格绑定数据，tableData即为后端传过来的数据  -->
                <el-table
                        :data="tableData"
                        ref="multipleTable"
                        border
                        style="width: 100%">
                    <!--  label="产品编号"表示这一列的表头是“公司名称”,width代表这一列宽度 -->

                    <el-table-column property="productBean.productNum" align="center" label="产品编号" ></el-table-column>

                    <el-table-column prop="repayWayOld,repayWayNew" label="还款方式"  align="center">
                        <template slot-scope="scope"> 原:{{scope.row.repayWayOld}}<br>现:{{scope.row.repayWayNew}} </template>
                    </el-table-column>

                    <el-table-column prop="loanLifeOld,loanLifeNew" label="借款期限(月)" align="center">
                        <template slot-scope="scope"> 原:{{scope.row.loanLifeOld}}<br>现:{{scope.row.loanLifeNew}} </template>
                    </el-table-column>

                    <el-table-column prop="monthRateOld,monthRateNew" label="月利率"  align="center">
                        <template slot-scope="scope"> 原:{{scope.row.monthRateOld}}%<br>现:{{scope.row.monthRateNew}}% </template>
                    </el-table-column>

                    <el-table-column prop="checkStatusOld,checkStatusNew" label="审核状态"  align="center">
                        <template slot-scope="scope"> 原:{{scope.row.checkStatusOld}}<br>现:{{scope.row.checkStatusNew}} </template>
                    </el-table-column>

                    <el-table-column property="opTime" align="center" label="操作时间" ></el-table-column>

                </el-table>
            </template>

            <template>
                <div class="block" style="float: right;margin-top: 30px">
                    <!-- size-change绑定的是每页显示数量变化时执行的方法，
                     current-change绑定的是翻页时执行的方法，
                     page-sizes属性中的数组是 “每页显示多少条” 下拉框中的数据，
                     page-size属性时当前显示条数，
                     layout是翻页控件的布局顺序，
                     total绑定的是总共多少条数据-->
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[10, 15, 20, 25]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </template>
        </el-card>
    </div>
</div>
<script th:inline="javascript">
    let app = new Vue({
            el:'#main',

            data:{
                //表格数据
                tableData:[],
                //总条数
                pageSize:10,
                //当前页
                currentPage:1,
                total:0,
            },
            methods:{
                //向后端发起请求，加载表格内容，传的参数是当前查第几页
                getData(val){
                    axios.get([[@{productLog/all}]],{
                        params:{
                            //每页多少条
                            limit:this.pageSize,
                            //从什么地方开始查
                            offSet:0,
                            //当前查第几页
                            pageNum:val,
                            //排序字段和排序方式
                            sort:"op_time",
                            sortOrder:"desc",
                            //要传属性的继续写在下面

                        }
                    }).then(res => {
                        //将查询到的数据赋给表格中绑定的变量
                        this.total = res.data.total;
                        this.tableData = res.data.rows;
                        for(let i = 0 ;i<this.tableData.length;i++){
                            if(this.tableData[i].checkStatusOld === 1){
                                this.tableData[i].checkStatusOld = "已审核";
                            }else {
                                this.tableData[i].checkStatusOld = "未审核";
                            }
                            if(this.tableData[i].checkStatusNew === 1){
                                this.tableData[i].checkStatusNew = "已审核";
                            }else {
                                this.tableData[i].checkStatusNew = "未审核";
                            }
                        }
                    }).catch(error => {
                        console.log(error);
                    })
                },
                //改变每页显示数据条数时执行的方法
                handleSizeChange(val){
                    this.pageSize=val;
                    this.currentPage=1;
                    this.getData(this.currentPage);
                },
                //翻页时执行的方法
                handleCurrentChange(val) {
                    this.currentPage=val;
                    this.getData(this.currentPage);
                },
                change:function(index,row){
                    console.log(index,row);
                },
            },
            //创建时执行查询，查第一页
            created : function () {
                this.getData(1);
            }
    })
    let app3 = new Vue({
        el:"#top"
    })
</script>
</body>
</html>